<template>
    <div class="compilationSummary-tab2">
        <div>
            <el-form
                :inline="true"
                :model="form"
                label-width="70px"
                class="formList"
            >
                <el-form-item label="预算年度">
                    <el-date-picker
                        v-model="form.month"
                        type="month"
                        placeholder="选择年"
                        value-format="yyyyMM"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item class="wid100">
                    {{ form.autoService ? "自服务" : "全业务" }}
                    <el-switch v-model="form.autoService"></el-switch>
                    <el-button
                        size="small"
                        style="margin-left: 12px"
                        type="primary"
                        @click="search"
                        >查询</el-button
                    >
                    <!--          <el-button size="small" type="orange" @click="batchxport()">批量导出</el-button>-->
                    <el-button size="small" type="orange" @click="exportModal()"
                        >导出</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <p class="g-unit">单位: 万元</p>
        <div class="tableBox">
            <el-table
                v-loading="tableLoading"
                :data="tableData"
                height="85vh"
                style="width: 100%"
                class="tableTh28"
                border
                stripe
                :span-method="arraySpanMethod"
                ref="table"
            >
                <el-table-column
                    label="类别"
                    prop="class1"
                    class-name="first-title"
                    min-width="50"
                    fixed
                ></el-table-column>
                <el-table-column
                    label="类别"
                    prop="class2"
                    class-name="second-title"
                    min-width="50"
                    fixed
                ></el-table-column>
                <el-table-column
                    label="类别"
                    prop="indexName"
                    class-name="third-title"
                    min-width="130"
                    fixed
                ></el-table-column>
                <el-table-column
                    min-width="100"
                    v-for="(key, value) in areaMap"
                    :key="key"
                    :label="key"
                    :prop="value"
                ></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { mergeTableRow, mergeSpan } from "@/utils/mixin";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import prefixAPI from "@/api/prefixAPI";
export default {
    name: "transverseIncome-tab2",
    data() {
        return {
            rowData: [],
            areaMap: "",
            spanArr: [],
            tableData: [],
            colList: [],
            newArr: [],
            tableLoading: false,
            flag: 0,
            form: {
                month: "",
                areaId: "",
                autoService: false
            },
            backRecord: false,
            accountInfo: ""
        };
    },
    watch: {
        rowData(val) {
            this.tableData = this.rowData;
        }
    },
    created() {
        let query = this.$route.query;
        this.backRecord = typeof query.backRecord === undefined ? true : false;
        let dd = new Date();
        let month = dd.getMonth();
        month = month < 10 ? "0" + month : month;
        this.form.month = dd.getFullYear() + month.toString();
        if (this.backRecord) {
            this.form.areaId = query.areaId;
        } else {
            this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            this.form.areaId = this.accountInfo.areaId;
        }
    },
    methods: {
        //table合并行
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (this.tableData.length > 0) {
                if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
                    return (
                        this.spanArr.length &&
                        this.spanArr[rowIndex][columnIndex]
                    );
                }
            }
        },
        //查询
        search() {
            let params = {
                acctMonth: this.form.month,
                areaId: this.form.areaId
                    ? this.form.areaId
                    : this.accountInfo.areaId,
                autoService: this.form.autoService,
                flag: this.flag
            };
            this.listResourceData(params);
        },
        listResourceData(params) {
            console.log(params);
            $budgetAPI.budgetHorizontalIncome(
                params,
                res => {
                    if (res.code == 0) {
                        this.tableData = [];
                        this.colDefList = [];
                        this.tableData = res.content.data;
                        this.tableData.forEach(item => {
                            Object.assign(item, item.map);
                        });
                        console.log(this.tableData);
                        // this.colDefList = res.content.columns;
                        this.areaMap = res.content.areaMap;
                        this.showFlag = true;
                        this.renderData();
                        this.$refs.tab1.tableLoading = false;
                    } else {
                        this.alertError(res);
                    }
                },
                err => {}
            );
        },
        renderData() {
            this.newArr = [];
            this.flag = 0;
            this.classify(this.colList);
            console.log(this.tableData);
            this.spanArr = mergeSpan(this.tableData, [
                "class1",
                "class2",
                "indexName"
            ]);
            console.log(this.spanArr);

            setTimeout(() => {
                this.$refs.table.doLayout();
            }, 1200);
        },
        classify(arr) {
            this.newArr = arr;
        },
        //导出
        exportModal() {
            let areaId = this.form.areaId;
            let month = this.form.month;
            let token = getCookie("token");
            // 根据不同模式切换不同的路径
            if (process.env.NODE_ENV == "development") {
                window.location.href =
                    prefixAPI.loc +
                    `/api/budgetHorizontalIncome/exportIncomeData?&autoService=${this.form.autoService}&acctMonth=${month}&token=${token}`;
            } else if (process.env.NODE_ENV == "production") {
                window.location.href =
                    prefixAPI.hp +
                    `/api/budgetHorizontalIncome/exportIncomeData?autoService=${this.form.autoService}&acctMonth=${month}&token=${token}`;
            }
        },
        // 批量导出
        batchxport() {
            let areaId = this.form.areaId;
            let month = this.form.month;
            let token = getCookie("token");
            // this.exportLoad = true;
            // 根据不同模式切换不同的路
            // $budgetAPI.downloadBatch(
            //  {
            //    areaId:areaId,
            //    month:month,
            //    token:token,
            //  },
            //   res => {
            // if (res.code == 0) {
            if (process.env.NODE_ENV == "development") {
                window.location.href =
                    prefixAPI.loc +
                    `/api/budgetHorizontalIncome/exportIncomeData?areaId=${areaId}&autoService=${this.form.autoService}&month=${month}&token=${token}`;
                // this.exportLoad = false;
                // console.log(code)
            } else if (process.env.NODE_ENV == "production") {
                window.location.href =
                    prefixAPI.hp +
                    `/api/budgetHorizontalIncome/exportIncomeData?areaId=${areaId}&autoService=${this.form.autoService}&month=${month}&token=${token}`;
                // this.exportLoad = false;
                // console.log(code)
            }
            // }
            // }, err => {}

            //  );
        },
        // 获取年份
        getmonth() {
            $budgetAPI.getBudgetmonth(
                {},
                res => {
                    if (res.code == 0) {
                        this.form.month = res.content;
                        let params = {
                            acctMonth: this.form.month,
                            areaId: this.form.areaId
                                ? this.form.areaId
                                : this.accountInfo.areaId,
                            autoService: this.form.autoService,
                            flag: this.flag
                        };
                        this.listResourceData(params);
                    } else {
                        this.alertError(res);
                    }
                },
                err => {}
            );
        }
    }
};
</script>

<style lang="scss">
.compilationSummary-tab2 {
    .first-title.is-leaf {
        position: relative;
        font-size: 0 !important;
        border-right: 1px solid #d7e5fb !important;
        .cell {
            color: #d7e5fb;
        }
    }
    .second-title.is-leaf {
        position: relative;
        font-size: 0 !important;
        border-right: 1px solid #d7e5fb !important;
        .cell {
            color: #d7e5fb;
        }
    }
    .third-title.is-leaf {
        overflow: visible;
        .cell {
            transform: translateX(-60px);
            white-space: nowrap;
            overflow: visible;
        }
    }
    /deep/ .third-title .cell {
        text-align: center;
    }
}
</style>
